<template>
  <div class="container">
    <h1>USER / CENTER</h1>
    <h1>个人中心</h1>
    <div class="info">
      <div class="left">
        <div class="active">个人中心</div>
        <div>我的收藏</div>
      </div>
      <div class="right">
        <div class="userinfo">
          <el-form :model="updateForm" label-width="80px">
            <el-form-item label="账号:">
              <el-input type="text" v-model="updateForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
              <el-input
                type="text"
                show-password
                v-model="updateForm.password"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input type="text" v-model="updateForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄:">
              <el-input type="text" v-model="updateForm.age"></el-input>
            </el-form-item>
            <el-form-item label="性别:">
              <el-input type="text" v-model="updateForm.gender"></el-input>
            </el-form-item>
            <el-form-item label="手机:">
              <el-input type="text" v-model="updateForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
              <el-input type="text" v-model="updateForm.email"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-upload
                class="upload-demo"
                action="action"
                accept="image/jpeg,image/jpg,image/png"
                list-type="picture"
                :limit="1"
                :auto-upload="true"
                ref="upload"
                multiple
              >
                <el-button type="primary" size="mini">上传照片</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateUser">更新信息</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="cinfo">
          收藏页
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      updateForm: this.$store.state.user,
    };
  },
  methods: {
   async updateUser(){
         let { data: res } = await this.$axios.post(
        "/user/update",
        this.updateForm
      );
      window.console.log(res);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 50%;
  margin: 0 auto;
  h1 {
    text-align: center;
    margin: 20px auto;
    font-weight: 200;
    font-size: 35px;
    color: #333;
  }
}
.info {
  width: 100%;
  display: flex;
  align-items: flex-start;
  .left {
    width: 30%;
    // border: 1px aqua solid;
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
    div {
      // border: 1px solid yellow;
      width: 150px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    .active {
      background-color: rgb(6, 216, 216);
      color: white;
    }
  }
  .right {
    width: 70%;
    // border: 1px blue solid;
    padding: 50px 20px;
    .userinfo {
      // display: none;
    }
  }
}
</style>